<div class="widget am-cf">
    <div class="widget-head am-cf">
        <div class="widget-title am-fl">设备状态:
            <span th:if="${device.isOnline}==true" class="am-badge am-badge-success">
                在线
            </span>
            <span th:if="${device.isOnline}==false" class="am-badge am-badge-danger">
                离线
            </span>
        </div>

        <table class="am-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>设备类型</th>
                <th>创建时间</th>
                <th>数据量</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td th:text="${device.id}"></td>
                <td>树莓派</td>
                <td th:text="${device.type }"></td>
                <td>2012-10-01</td>
                <td>3123</td>
                <td>温度探测器</td>
            </tr>

            </tbody>
        </table>

    </div>
</div>


<div class="widget am-cf">
    <div class="widget-head am-cf">
        <div class="widget-title am-fl">命令面板</div>
        <!--没有使用网格的内容-->
        <div class="am-container">

            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <label for="doc3" class="am-u-sm-2 am-form-label">ID</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="deviceId" placeholder="当前设备ID" name="deviceId"
                               th:attr="value=${ device.id}" disabled="disabled"/>
                        <input type="hidden" id="deviceType" placeholder="当前设备ID" name="deviceType"
                               th:attr="value=${ device.type}" disabled="disabled"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="doc-ipt" class="am-u-sm-2 am-form-label">内容</label>
                    <div class="am-u-sm-10">
                        <input type="text" id="message" name="message" placeholder="输入你想推送内容" required="required"/>
                    </div>
                </div>


                <div class="am-form-group">
                    <div class="am-u-sm-10 am-u-sm-offset-2">
                        <button type="button" onclick="push()" class="am-btn am-btn-default">推送</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>



<div class="widget am-cf" th:if="${device.type.name() == 'TYPE_SWITCHER'}">
    <div class=" widget-head am-cf">
        <div class="widget-title am-fl">状态</div>
    </div>
    <div style="text-align: center">
        <p>状态：<span id="doc-single-toggle-status" class="am-text-danger">关</span></p>
        <button id="doc-single-toggle" type="button" class="am-btn am-btn-primary" data-am-button th:name="${device.id}">切换状态</button>

        <script type="application/javascript">
            function changeState(message) {
                $.post("/admin/pushMessage", {
                    deviceId:$('#deviceId').val(),
                    message: message
                }, function (data, status) {
                    alert("状态转换成功！"+status);
                });
            }
        </script>

        <script>
            $(function() {
                var $toggleButton = $('#doc-single-toggle');
                $toggleButton.on('click', function() {
                    var status = $toggleButton.hasClass('am-active') ? '开' : '关';
                    if(status=="开"){
                        changeState("1");
                        console.log("ON");

                    }else if (status=="关"){
                        changeState("0");
                        console.log("OFF");

                    }
                    $('#doc-single-toggle-status').text(status);
                });
            })
        </script>
    </div>

</div>

<script type="application/javascript">
    function push() {
        $.post("/admin/pushMessage", {
            deviceId:$('#deviceId').val(),
            message: $('#message').val()
        }, function (data, status) {
            alert("推送成功！"+status);
        });
    }
</script>



<div class="widget am-cf" th:if="${device.type.name() == 'TYPE_MEDIA'}">
    <div class="widget-head am-cf">
        <div class="widget-title am-fl">TYPE_MEDIA</div>
    </div>


    <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
        <thead>
        <tr>
            <th>缩略图</th>
            <th>标题</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="gradeX">
            <td>
                <img src="/images/logo.png" class="tpl-table-line-img" alt="">
            </td>
            <td class="am-text-middle">家庭监控</td>
            <td class="am-text-middle">2016-09-26</td>
            <td class="am-text-middle">
                <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                        <i class="am-icon-pencil"></i> 详情
                    </a>
                    <a href="javascript:;">
                        <i class="am-icon-pencil"></i> 编辑
                    </a>
                    <a  class="tpl-table-black-operation-del">
                        <i class="am-icon-trash"></i> 删除
                    </a>
                </div>
            </td>
        </tr>


        <tr class="gradeX">
            <td>
                <img src="/images/logo.png" class="tpl-table-line-img" alt="">
            </td>
            <td class="am-text-middle">家庭监控</td>
            <td class="am-text-middle">2016-09-26</td>
            <td class="am-text-middle">
                <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                        <i class="am-icon-pencil"></i> 详情
                    </a>
                    <a href="javascript:;">
                        <i class="am-icon-pencil"></i> 编辑
                    </a>
                    <a  class="tpl-table-black-operation-del">
                        <i class="am-icon-trash"></i> 删除
                    </a>
                </div>
            </td>
        </tr>


        <tr class="gradeX">
            <td>
                <img src="/images/logo.png" class="tpl-table-line-img" alt="">
            </td>
            <td class="am-text-middle">家庭监控</td>
            <td class="am-text-middle">2016-09-26</td>
            <td class="am-text-middle">
                <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                        <i class="am-icon-pencil"></i> 详情
                    </a>
                    <a href="javascript:;">
                        <i class="am-icon-pencil"></i> 编辑
                    </a>
                    <a  class="tpl-table-black-operation-del">
                        <i class="am-icon-trash"></i> 删除
                    </a>
                </div>
            </td>
        </tr>


        </tbody>
    </table>


</div>

<div class="widget am-cf" th:if="${device.type.name() == 'TYPE_VALUE'}">
    <div class="widget-head am-cf">
        <div class="widget-title am-fl">数据预览</div>
    </div>

    <table class="am-table am-table-bordered am-table-striped am-table-compact">
        <thead>
        <tr>
            <th>ID</th>
            <th>值</th>
            <th>创建时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>100</td>
            <td>2017.8.30 12.23</td>
        </tr>

        <tr>
            <td>1</td>
            <td>100</td>
            <td>2017.8.30 12.23</td>
        </tr>
        <tr>
            <td>1</td>
            <td>100</td>
            <td>2017.8.30 12.23</td>
        </tr>

        </tbody>

    </table>
    <ul class="am-pagination">
        <li><a href="">上一页</a></li>
        <li><span>5/100</span></li>
        <li><a href="">下一页</a></li>
    </ul>

</div>





